<template>
  <view class="collapse-content">
    <view>
      <view>
        <view>记录人员：</view>
        <view>{{ data.registrarUser }}</view>
      </view>
      <view>
        <view>记录时间：</view>
        <view>{{ meetingTime(data.registrarDateTime) | empty }}</view>
      </view>
      <view>
        <view>身体健康状态是否良好：</view>
        <view>{{ data.personHealth == '0' ? '良好' : data.personHealth == '1' ? '较差' : '--' }}</view>
      </view>
      <view>
        <view>有无烦心事：</view>
        <view>{{ data.hasBothering == '1' ? '有' : '无' }}</view>
      </view>
      <view v-if="data.personHealth == '1'">
        <view>异常状态记录：</view>
        <view>{{ data.unusualLog | empty }}</view>
      </view>
      <view>
        <view>有无领导：</view>
        <view>{{ data.hasLeader == '1' ? '有' : '无' }}</view>
      </view>
      <view v-if="data.hasLeader == '1'">
        <view>到场领导：</view>
        <view>{{ data.leaderNames | empty }}</view>
      </view>
      <uni-table stripe border v-if="data.absentLogList && data.absentLogList.length">
        <uni-tr>
          <uni-th width="50" align="center">序号</uni-th>
          <uni-th width="100" align="center">人员姓名</uni-th>
          <uni-th align="center">缺勤原因</uni-th>
        </uni-tr>
        <uni-tr v-for="(item, index) in data.absentLogList" :key="index">
          <uni-td align="center">{{ index + 1 }}</uni-td>
          <uni-td align="center">{{ item.userName }}</uni-td>
          <uni-td align="center">{{ item.reason }}</uni-td>
        </uni-tr>
      </uni-table>
      <view class="flex-column no-border">
        <view>图片：</view>
        <view v-if="data.recordFile">
          <image-upload state="view" :imageUrl="data.recordFile"></image-upload>
        </view>
        <view v-else>--</view>
      </view>
    </view>
  </view>
</template>
<script>
import dayjs from 'dayjs'
import ImageUpload from '@/components/image-upload/index.vue'

export default {
  props: {
    data: {
      type: Object,
      default: () => ({}),
    },
    meetingNodeType: {
      type: String,
    },
  },
  computed: {
    meetingTime() {
      return function (time) {
        return time ? dayjs(time).format('YYYY/MM/DD HH:mm') : time
      }
    },
  },
  components: { ImageUpload },
  filters: {
    empty(val) {
      return val || '--'
    },
  },
}
</script>
<style lang="scss" scoped>
.collapse-content {
  padding-left: 30rpx;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  .js-text {
    text {
      padding-right: 20rpx;
    }
  }
  & > view > view {
    background: #fff;
    padding: 24rpx 0;
    width: 100%;
    display: flex;
    align-items: flex-start;
    font-size: 28rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    border-bottom: 1rpx solid #d5d7e3;

    & view:first-child {
      // width: 400rpx;
    }

    & view:last-child {
      flex: 1;
      word-break: break-all;
      color: #666666;
      width: 100%;
    }
  }

  & > view > view:last-child {
    border: 0;
  }

  & > view > .g {
    height: 20rpx;
    background: rgb(245, 245, 245);
    position: relative;
    left: -30rpx;
    width: 100vw;
    padding: 0;
    margin: 0;
  }
}

.flex-column {
  flex-direction: column;

  & view:first-child {
    width: 100%;
    text-align: left !important;
    margin-bottom: 20rpx;
  }
}

.no-border {
  border: 0 !important;
}
</style>
